// ui/components/ParticipantItem.js
// Assuming ElementPlus components (ElTooltip, ElAvatar, ElIcon) and icons are globally available.

export default {
  name: 'ParticipantItem',
  // components: { User, Cpu, Star, Loading, Edit, Microphone, Pointer }, // Not needed if globally registered
  props: {
    participant: {
      type: Object, // Was PropType<ParticipantModel>
      required: true
      // JSDoc for reference:
      /**
       * @type {{
       *   participant_id: string;
       *   nickname: string;
       *   role: "human" | "llm_agent";
       *   is_host: boolean;
       *   status: "idle" | "thinking" | "typing" | "desire_to_speak" | "speaking" | string;
       *   avatar_icon_or_color?: string;
       * }}
       */
    },
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  emits: ['clicked'],
  setup(props, { emit }) {
    const { computed } = Vue; // Vue is global

    function handleClick() {
      emit('clicked', props.participant.participant_id);
    }

    const avatarInitial = computed(() => {
      return props.participant.nickname ? props.participant.nickname.charAt(0).toUpperCase() : '?';
    });

    const avatarColor = computed(() => {
      if (props.participant.avatar_icon_or_color) {
        return props.participant.avatar_icon_or_color;
      }
      let hash = 0;
      for (let i = 0; i < props.participant.participant_id.length; i++) {
        hash = props.participant.participant_id.charCodeAt(i) + ((hash << 5) - hash);
      }
      const color = (hash & 0x00FFFFFF).toString(16).toUpperCase();
      return "#" + "00000".substring(0, 6 - color.length) + color;
    });

    const roleDisplay = computed(() => {
      if (props.participant.role === 'human') return '人类用户';
      if (props.participant.role === 'llm_agent') return 'AI Agent';
      return String(props.participant.role);
    });

    const statusDisplay = computed(() => {
      switch (props.participant.status) {
        case 'idle': return '空闲';
        case 'thinking': return '思考中';
        case 'typing': return '输入中';
        case 'desire_to_speak': return '想发言';
        case 'speaking': return '发言中';
        default: return String(props.participant.status);
      }
    });

    const participantTitle = computed(() => {
        let title = `${props.participant.nickname} (${roleDisplay.value})`;
        if (props.participant.role === 'llm_agent') {
            title += ` - ${statusDisplay.value}`;
        }
        if (props.participant.is_host) {
            title += ' [主持人]';
        }
        if (props.participant.role === 'llm_agent' && props.isSelected) {
            title += ' (正在查看日志)';
        } else if (props.participant.role === 'llm_agent') {
            title += ' (点击查看日志)';
        }
        return title;
    });

    return {
      // props are automatically available
      handleClick,
      avatarInitial,
      avatarColor,
      // roleDisplay, // Not directly used in template, used by participantTitle
      statusDisplay, // Used in template
      participantTitle,
    };
  },
  template: `
  <el-tooltip :content="participantTitle" placement="top" :disabled="!participantTitle">
    <li
      class="participant-item"
      :class="{
        'is-selected': isSelected,
        'is-human': participant.role === 'human',
        'is-agent': participant.role === 'llm_agent',
        'is-host': participant.is_host
      }"
      @click="handleClick"
    >
      <el-avatar :size="32" :style="{ backgroundColor: avatarColor, marginRight: '10px', flexShrink: 0 }" class="participant-avatar-el">
        {{ avatarInitial }}
      </el-avatar>
      <div class="participant-info">
        <span class="nickname">
          <el-icon v-if="participant.role === 'human'" class="role-icon"><User /></el-icon>
          <el-icon v-else-if="participant.role === 'llm_agent'" class="role-icon"><Cpu /></el-icon>
          <el-icon v-if="participant.is_host" class="host-icon" title="主持人"><Star /></el-icon>
          {{ participant.nickname }}
        </span>
        <span class="role-status">
          <span v-if="participant.status && participant.status !== 'idle' && participant.status !== 'desire_to_speak'" :class="['status-indicator', participant.status.toLowerCase()]">
            <el-icon v-if="participant.status === 'thinking'" class="status-icon"><Loading /></el-icon>
            <el-icon v-else-if="participant.status === 'typing'" class="status-icon"><Edit /></el-icon>
            <el-icon v-else-if="participant.status === 'speaking'" class="status-icon"><Microphone /></el-icon>
            {{ statusDisplay }}
          </span>
        </span>
      </div>
      <el-tooltip v-if="participant.role === 'llm_agent' && participant.status === 'desire_to_speak'" content="想发言" placement="top">
        <el-icon class="desire-to-speak-indicator"><Pointer /></el-icon>
      </el-tooltip>
    </li>
  </el-tooltip>
  `
};